(function (window) {
	// 从浏览器localStorage中提取todos列表
	let todos = JSON.parse(localStorage.getItem('todos')) || []
	const app = Vue.createApp({
		// el: '.todoapp',
		data() {
			// Data函数应该返回一个对象
			return {
				// 任务列表（写死的情况）
				// todos: [
				// 	{id: 1, name: '吃饭', flag: true},
				// 	{id: 2, name: '喝酒', flag: false},
				// 	{id: 3, name: '唱歌', flag: false}
				// ],
				// 任务列表，不写死，初始值从浏览器localStorage中提取
				todos,
				// 新增任务输入框绑定值
				todoName: '',
				now: -1,
				// 过滤类型
				filterType: 'ALL'
			}
		},
		methods: {
			// 删除任务
			delTodo(id) {
				// 过滤  只要把id不同留下来
				this.todos = this.todos.filter(item => item.id !== id)
			},
			// 添加任务
			addTodo() {
				this.todos.unshift({
					id: +new Date(),
					name: this.todoName,
					flag: false

				})
				this.todoName = ''
			},
			// 显示修改框
			showEdit(id) {
				this.now = id
			},
			// 修改任务
			editTodo() {
				this.now = -1
			},
			// 清空已完成任务
			clearTodo() {
				// 过滤保留未完成任务
				this.todos = this.todos.filter(item => !item.flag)
			},
			// 切换过滤类型
			change(filterType) {
				// 控制样式判断值
				this.filterType = filterType
			}
		},
		computed: {
			//控制是否显示Footer
			isShowFooter() {
				// 当任务数量超过0，就显示footer
				return this.todos.length > 0
			},
			// 统计未完成的任务
			unCompletedCount() {
				// 过滤出未完成的任务
				// this.todos.filter(item => !item.flag)
				return this.todos.filter(item => !item.flag).length
			},
			// 控制清空按钮的显示隐藏
			isShowClear() {
				// 如果没有已完成任务，就隐藏
				// 如果存在已完成任务，便显示
				return this.todos.some(item => item.flag)
			},
			// 控制是否全部选中
			// 需要修改，提供set函数
			isCheckedAll: {
				get() {
					// 当所有的任务都完成了，表示都选中了
					return this.todos.every(item => item.flag)
				},
				set(value) {
					// console.log(value)
					// value修改后的计算属性，，，，，，应该修改todos中所有的任务的flag
					this.todos.forEach(item => item.flag = value)
				}
			},
			// 用于显示的列表
			showList() {
				// 计算属性showList 要根据 filterType
				if (this.filterType === 'Active') { // 返回未完成的任务
					return this.todos.filter(item => !item.flag)
				} else if (this.filterType === 'Completed') { // 返回已完成的任务
					return this.todos.filter(item => item.flag)
				} else { // 默认返回所有任务
					return this.todos
				}
			}

		},
		// 添加侦听
		watch: {
			// 侦听todos属性的变化
			todos: {
				deep: true,
				handler(value) {
					// 把最新的todos存储到localStorage中
					localStorage.setItem('todos', JSON.stringify(value))
				}
			}
		}
	})

	const vm = app.mount('.todoapp')
	window.vm = vm

})(window);
